<template>
  <div>
    <header id="home-head">
      <div class="go-cate">
        <van-icon class="iconfont" size="24" color="#fff" class-prefix="icon" name="fenlei" />
        <span>分类</span>
      </div>
      <div class="search" @click="$router.push('/search')">
        <van-icon class="iconfont" size="16" color="#fff" class-prefix="icon" name="fangdajing" />
        <span class="search-text">搜索商品</span>
      </div>
    </header>
  </div>
</template>

<script>
export default {}
</script>

<style lang="scss" scoped>
#home-head{
  height:50px;
  width: 100%;
  background-color: #f66;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding-right:10PX;
  position: fixed;
  left:0;
  top:0;
  z-index:10;
  .go-cate{
    display: flex;
    flex-direction: column;
    padding:0 10PX;
    font-size: 12px;
    color:#fff;
  }
  .search{
    flex:1;
    background-color:rgba(255,255,255,.2);
    height:30px;
    border-radius:15px;
    display: flex;
    align-items: center;
    padding-left:10PX;
    box-sizing: border-box;
    &-text{
      font-size:14px;
      color:#fff;
      margin-left: 10PX;
    }
  }
}
</style>
